<template>
  <div v-loading="loadings" class="app-container">
    <!-- 项目基础信息 -->
    <h5 class="titleInfo">
      项目基础信息
    </h5>
    <el-form ref="form"  :model="form" :rules="rules" label-width="130px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目关键字">
            <el-input v-model="form.keyword" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目分类" prop="cates">
            <el-cascader
              v-model="form.cates"
              placeholder="请选择"
              :options="cateOption"
              change-on-select
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
                    <el-form-item label="促销条">
                        <el-select placeholder="请选择" v-model="form.promotionsId">
                            <el-option
                            v-for="item in proOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
        <el-col :span="12">
          <el-form-item label="医院名称" prop="hospitalId">
            <el-select v-model="form.hospitalId" placeholder="请选择">
              <el-option
                v-for="item in hosOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="擅长医生">
            <el-select
              v-model="form.doctors"
              multiple
              placeholder="请选择"
              @click.native="getDoctorList()"
            >
              <el-option
                v-for="item in docOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="简介">
            <el-input v-model="form.descript" />
          </el-form-item>
        </el-col>
        <!-- 新增项目标签 -->
        <el-col :span="12">
          <el-form-item label="项目标签">
            <el-select v-model="form.tagsId" placeholder="请选择">
              <el-option
                v-for="item in mmkTagsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 项目特色 -->
      <div class="divBar" />
      <h5 class="titleInfo">
        项目特色
        <span style="font-size:12px;margin-left: 12px;color: #606266;">
          当保险服务选择为是时，项目保障必须填写
        </span>
      </h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否维护">
            <el-select v-model="form.isRepair" placeholder="请选择">
              <el-option
                v-for="item in repOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保险服务">
            <el-select v-model="form.insuranceIsSet" placeholder="请选择">
              <el-option
                v-for="item in insOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.insuranceIsSet=='2'" :span="12">
          <el-form-item label="项目保障">
            <el-select
              v-model="form.ensureContent"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择"
            >
              <el-option
                v-for="item in ensOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 项目价格信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">
        项目价格信息
      </h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="购买方式" prop="projectType">
            <el-select
              v-model="form.projectType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <div v-if="priceSH">
          <el-col :span="12">
            <el-form-item label="预约价格" prop="appointmentPrice">
              <el-input v-model="form.appointmentPrice" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠价格范围起" prop="discountsRangeB">
              <el-input v-model="form.discountsRangeB" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠价格范围止" prop="discountsRangeE">
              <el-input v-model="form.discountsRangeE" @blur="discBlur" />
            </el-form-item>
          </el-col>
        </div>
        <div v-else>
          <el-col :span="12">
            <el-form-item label="项目全款价" prop="projectPrice">
              <el-input v-model="form.projectPrice" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="抵扣积分" prop="deductionCredit">
              <el-input v-model="form.deductionCredit" />
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="12">
          <el-form-item label="原价" prop="originPrice">
            <el-input v-model="form.originPrice" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优惠价" prop="discounts">
            <el-input v-model="form.discounts" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目预约量">
            <el-input v-model="form.appointmentPeoples" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 项目显示状态 -->
      <div class="divBar" />
      <h5 class="titleInfo">
        项目显示状态
      </h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否上架">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option
                v-for="item in staOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推荐首页">
            <el-select v-model="form.isDashboard" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 项目材料管理 -->
      <div class="divBar" />
      <h5 class="titleInfo">
        项目材料管理
      </h5>
      <el-row>
        <el-col :span="24">
          <el-form-item label="LOGO">
            <uploadImg ref="uploadImg1" :img-upload-flag="imgUploadFlag" :file-num="fileNum1" :hide-upload="true" :file-list="fileList1" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="项目图册">
            <uploadImg ref="uploadImg" :img-upload-flag="imgUploadFlag" :file-num="fileNum" :file-list="fileList" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="项目描述">
            <Tinymce v-model="form.content" style="width:96%" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import uploadImg from '@/components/UploadImg/index'
import Tinymce from '@/components/Tinymce'
import { hospitalDropDown } from '@/api/doctorManage'
import { doctorList, insertProject, updateProject, findProjectByProjectId, MmkTagsList } from '@/api/itemList'
import { findProjectGuaranteeList } from '@/api/itemSecurity'
import { findAllBeautyCategoryList } from '@/api/medicalClassifyList'

// 正整数
const numberReg = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入优惠价范围'))
  } else {
    const reg = /^[0-9]*[1-9][0-9]*$/
    if (reg.test(value)) {
      callback()
    } else {
      return callback(new Error('请输入0以上的正整数'))
    }
  }
}

export default {
  name: 'ItemEdit',
  components: { uploadImg, Tinymce },
  data() {
    return {
      mmkTagsOptions: [],
      loadings: true,
      fileList1: [],
      fileNum1: 1,
      imgUploadFlag: true,
      fileList: [],
      fileNum: 4,
      content: '',
      value1: '',
      options: [{
        value: '0',
        label: '否'
      }, {
        value: '1',
        label: '是'
      }
      ],
      priceSH: true,
      proOptions: [],
      cates: [],
      form: {
        projectId: null,
        name: null,
        keyword: null,
        tagsId: null,
        // promotionsId:null,
        hospitalId: null,
        cates: null,
        doctors: null,
        descript: '',
        isRepair: '0',
        insuranceIsSet: '1',
        ensureContent: null,
        projectType: '0',
        appointmentPrice: '0',
        discountsRangeB: '',
        discountsRangeE: '',
        projectPrice: '0',
        deductionCredit: '0',
        originPrice: null,
        discounts: null,
        appointmentPeoples: null,
        sort: null,
        status: null,
        isDashboard: null,
        projectImages: [],
        pBcId: null,
        content: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        cates: [
          { required: true, message: '请选择项目分类', trigger: 'blur' }
        ],
        hospitalId: [
          { required: true, message: '请选择医院名称', trigger: 'blur' }
        ],
        projectType: [
          { required: true, message: '请选择购买方式', trigger: 'blur' }
        ],
        appointmentPrice: [
          { required: true, message: '请输入预约价格', trigger: 'blur' }
        ],
        projectPrice: [
          { required: true, message: '请输入项目全款价', trigger: 'blur' }
        ],
        deductionCredit: [
          { required: true, message: '请输入抵扣积分', trigger: 'blur' }
        ],
        originPrice: [
          { required: true, message: '请输入原价', trigger: 'blur' }
        ],
        discounts: [
          { required: true, message: '请输入优惠价', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        discountsRangeB: [
          { required: true, validator: numberReg, trigger: 'blur' }
        ],
        discountsRangeE: [
          { required: true, validator: numberReg, trigger: 'blur' }
        ]
      },
      hosOptions: [],
      docOptions: [],
      repOptions: [{
        value: '0',
        label: '否'
      }, {
        value: '1',
        label: '是'
      }
      ],
      insOptions: [{
        value: '1',
        label: '否'
      }, {
        value: '2',
        label: '是'
      }
      ],
      typeOptions: [{
        value: '0',
        label: '预约项目'
      }, {
        value: '1',
        label: '全额购买项目'
      }
      ],
      staOptions: [{
        value: '0',
        label: '上线'
      }, {
        value: '1',
        label: '下线'
      }, {
        value: '2',
        label: '回收站'
      }
      ],
      ensOptions: [],
      cateOption: [{
        value: 0,
        label: '医美'
      }, {
        value: 1,
        label: '口腔管理'
      }, {
        value: 2,
        label: '健康管理'
      }],
      userId: ''
    }
  },
  watch: {
    'form.projectType'(val) {
      if (this.form.projectType == '0') {
        this.priceSH = true
      } else {
        this.priceSH = false
      }
    }
  },
  created() {
    this.getDrop()
    this.cateOption = JSON.parse(localStorage.getItem('cate'))
    // if(this.cateFn('0')!=[]){
    //     this.cateOption[0]["children"] = this.cateFn('0')
    // }
    // if(this.cateFn('1')!=[]){
    //     this.cateOption[1]["children"] = this.cateFn('1')
    // }
    // if(this.cateFn('2')!=[]){
    //     this.cateOption[2]["children"] = this.cateFn('2')
    // }
  },
  mounted() {
    // 获取项目标签
    this.MmkTagsList()
    this.userId = this.$route.query.userId + ''
    this.getInfo()
    this.getDoctorList()
    this.form.projectId = Number(this.userId)
    // console.log(this.form)
  },
  methods: {
    // 获取项目标签
    MmkTagsList() {
      const datas = { id: 5 }
      MmkTagsList(datas)
        .then(res => {
          if (res.data.code == 0) {
            console.log('tags', res)
            const resData = res.data.data
            resData.forEach((item) => {
              this.mmkTagsOptions.push({
                value: Number(item.id),
                label: item.name
              })
            })
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
    },
    discBlur() {
      if (this.form.discountsRangeE < this.form.discountsRangeB) {
        this.$message({
          message: '优惠价格范围止不能小于优惠价格范围起',
          type: 'warning'
        })
        this.form.discountsRangeE = ''
      }
    },
    getInfo() {
      this.loadings = true
      const datas = {
        id: this.userId
      }
      findProjectByProjectId(datas).then(res => {
        this.loadings = false
        this.form = res.data.data
        console.log(this.form)
        this.form.insuranceIsSet = this.form.insuranceIsSet + ''
        this.form.isRepair = this.form.isRepair + ''
        this.form.projectType = this.form.projectType + ''
        this.form.status = this.form.status + ''
        this.form.isDashboard = this.form.isDashboard + ''
        if (this.form.ensureContent != '0') {
          this.form.ensureContent = this.form.ensureContent.split(',').map(Number)
        } else {
          this.form.ensureContent = []
        }
        if (this.form.discountsRange) {
          this.form.discountsRangeB = this.form.discountsRange.split('~')[0]
          this.form.discountsRangeE = this.form.discountsRange.split('~')[1]
        } else {
          this.form.discountsRangeB = ''
          this.form.discountsRangeE = ''
        }
        if (this.form.doctors) {
          this.form.doctors = this.form.doctors.map(Number)
        } else {
          this.form.doctors = []
        }
        if (this.form.pBcId) {
          this.form.cates = this.form.pBcId.split('/').map(Number)
        } else {
          this.form.cates = []
        }
        if (res.data.data.projectImages) {
          res.data.data.projectImages.forEach((e, index) => {
            this.fileList.push({
              url: localStorage.getItem('imgUrlPrefix') + res.data.data.projectImages[index]
            })
          })
        }
        if (res.data.data.image) {
          this.fileList1 = [{
            url: localStorage.getItem('imgUrlPrefix') + res.data.data.image
          }]
        }
        console.log(this.form)
      })
    },
    // 获取分类
    cateFn(e) {
      const datas = {
        plate: e
      }
      const newArr = []
      findAllBeautyCategoryList(datas).then(res => {
        // console.log(res)
        const resData = res.data.data.list
        if (resData != []) {
          resData.forEach((item1, index) => {
            newArr.push({
              value: item1.id,
              label: item1.name
            })
            if (item1.children != null) {
              newArr[index]['children'] = []
              item1.children.forEach((item2, i) => {
                newArr[index]['children'].push({
                  value: item2.id,
                  label: item2.name
                })
                if (item2.children != null) {
                  newArr[index]['children'][i]['children'] = []
                  item2.children.forEach((item3) => {
                    newArr[index]['children'][i]['children'].push({
                      value: item3.id,
                      label: item3.name
                    })
                  })
                }
              })
            }
          })
        }
      })
      return newArr
    },
    getDoctorList() {
      const datas = {
        hospitalId: this.form.hospitalId + '',
        pageNum: '1',
        pageSize: '10000'
      }
      doctorList(datas).then(res => {
        // console.log(res)
        const resData = res.data.data.list
        const newData = []
        resData.forEach(e => {
          newData.push({
            value: e.id,
            label: e.name
          })
        })
        this.docOptions = newData
        // console.log(newData)
      })
    },
    // 获取相关下拉列表
    getDrop() {
      // 医院列表
      hospitalDropDown().then(res => {
        const resData = res.data.data
        const newData = []
        resData.forEach(e => {
          newData.push({
            value: e.id,
            label: e.name
          })
        })
        this.hosOptions = newData
      })
        .catch(error => {
          this.$message.error(error)
        })
      // 项目保障
      const datas1 = {
        'pageNum': '0',
        'pageSize': '10000'
      }
      findProjectGuaranteeList(datas1).then(res => {
        const resData = res.data.data.list
        const newData = []
        resData.forEach(e => {
          newData.push({
            value: e.id,
            label: e.name
          })
        })
        this.ensOptions = newData
        // console.log(newData)
      })
    }
  }
}
</script>
<style scoped>
.app-container{padding: 0px!important}
</style>
